<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Profile</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/Personal information.css">
    <script src="./js/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <el-header>
        <el-container>
            <div>
                <el-tabs v-model="menu1" @tab-click="handleClick">
                    <el-tab-pane label="首页" name="first"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                </el-tabs>
            </div>
            <div>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <div>
                <el-dropdown split-button type="primary">
                    发布文章
                    <el-dropdown-menu>
                        <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{login:false}">
                <el-button type="primary" @click="open" plain>
                            <span>
                                登陆
                            </span>
                    <span>
                                注册
                            </span>
                </el-button>
            </div>
            <div v-if="{login:false}">
                <el-dropdown>
                    <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>评论</el-dropdown-item>
                        <el-dropdown-item>赞和收藏</el-dropdown-item>
                        <el-dropdown-item>新增粉丝</el-dropdown-item>
                        <el-dropdown-item>私信</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{login:false}">
                <div><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
            </div>
        </el-container>
    </el-header>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item>
            <a href="/user/1590344390294795" target="_blank">
                <i class="el-icon-arrow-left"></i>
                返回个人主页
            </a>
        </el-menu-item>
    </el-menu>
    <el-divider></el-divider>

    <div class="grid-container">
        <div class="left">
            <el-aside width="200px">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item index="1" route="/user/settings/profile">
                        <i class="el-icon-user"></i>
                        <span slot="title">个人资料</span>
                    </el-menu-item>
                    <el-menu-item index="2" route="/user/settings/account">
                        <i class="el-icon-setting"></i>
                        <span slot="title">账号设置</span>
                    </el-menu-item>
                    <el-menu-item index="3" route="/user/settings/common">
                        <i class="el-icon-menu"></i>
                        <span slot="title">通用设置</span>
                    </el-menu-item>
                    <el-menu-item index="4" route="/user/settings/message">
                        <i class="el-icon-message"></i>
                        <span slot="title">消息设置</span>
                    </el-menu-item>
                    <el-menu-item index="5" route="/user/settings/block?type=author">
                        <i class="el-icon-star-off"></i>
                        <span slot="title">屏蔽管理</span>
                    </el-menu-item>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-edit"></i>
                            <span>标签管理</span>
                        </template>
                        <!-- 这里可以添加子菜单 -->
                    </el-submenu>
                </el-menu>
            </el-aside>
        </div>

        <div class="right">
            <div class="setting-profile">
                <div class="setting-profile-view">
                    <div class="nav-text">个人资料</div>
                    <div class="divider"></div> <!-- Add the divider here -->
                    <div class="user-infos">
                        <el-form ref="form" :model="form" label-width="67px" class="form byte-form byte-form--label-right">
                            <div class="profile-title">基本信息</div>

                            <!-- Wrap the form and upload components in a row -->
                            <el-row :gutter="20">
                                <el-col :span="16"> <!-- 16 columns for the form -->
                                    <el-form ref="form" :model="form" label-width="100px" class="form byte-form byte-form--label-right">
                                        <!-- Your form items go here -->
                                        <el-form-item label="用户名" prop="screen_name" class="byte-form-item byte-form-item--large byte-form-item--required byte-form-item--success">
                                            <el-input v-model="form.screen_name" placeholder="请输入用户名" maxlength="20" show-word-limit></el-input>
                                        </el-form-item>
                                        <el-form-item label="个人介绍" prop="description" class="no-wrap-label">
                                            <el-input type="textarea" v-model="form.description" placeholder="请填写职业技能、擅长的事情、兴趣爱好等" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>

                                        <!-- New form items -->
                                        <el-form-item label="邮箱" prop="email">
                                            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                                        </el-form-item>
                                        <el-form-item label="手机号" prop="phone">
                                            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="密码" prop="password">
                                            <el-input
                                                    v-model="form.password"
                                                    type="password"
                                                    placeholder="请输入密码"
                                                    :type="showPassword ? 'text' : 'password'"
                                            >
                                                <template #append>
                                                    <el-button
                                                            type="text"
                                                            @click="showPassword = !showPassword"
                                                    >
                                                        {{ showPassword ? '隐藏密码' : '显示密码' }}
                                                    </el-button>
                                                </template>
                                            </el-input>
                                        </el-form-item>

                                        <div class="button-container">
                                            <el-button type="primary">保存修改</el-button>
                                        </div>
                                    </el-form>
                                </el-col>
                                <el-col :span="8"> <!-- 8 columns for the upload component -->
                                    <!-- Your upload component goes here -->
                                    <div class="avatar-and-input">
                                        <div class="avatar-info">
                                            <el-upload
                                                    class="avatar-uploader"
                                                    action="your_upload_url"
                                                    :show-file-list="false"
                                                    :on-success="handleAvatarSuccess"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-form></div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="./js/Personal Information.js"></script>
</body>
</html>